<template>
    <el-dialog
      title="添加规则"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose">
      <pform ref="form" :model="form" lw="120">
        <el-form-item label="优先级">
          <el-input style="width:233px;"  v-model="form.field1" placeholder="请输入1-100"></el-input>
        </el-form-item>
        <el-form-item label="策略">
          <el-select style="width:233px;" v-model="form.field2" placeholder="请选择策略">
            <el-option label="允许" value="Y"></el-option>
            <el-option label="拒绝" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select style="width:233px;" v-model="form.field3" placeholder="请选择类型">
            <el-option label="IPv4" value="1"></el-option>
            <el-option label="IPv6" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协议">
          <el-select style="width:233px;" v-model="form.field4" placeholder="请选择协议">
            <el-option label="TCP" value="1"></el-option>
            <el-option label="UDP" value="2"></el-option>
            <el-option label="ICMP" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源地址">
          <el-input style="width:233px;"  v-model="form.field5" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="源端口">
          <el-input style="width:233px;"  v-model="form.field6" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="目的地址">
          <el-input style="width:233px;"  v-model="form.field7" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="目的端口">
          <el-input style="width:233px;"  v-model="form.field8" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" style="width:466px;" :rows="4"  v-model="form.field9" placeholder="请输入"></el-input>
        </el-form-item>
      </pform>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
      </el-dialog>
  </template>
  <script>
  export default {
    name: "aclAdd",
    data(){
      return {
        dialogVisible:false,
        form:{
          field2:'Y',
          field3:'IPv4',
          field4:'TCP',
        }
      }
    },
    methods:{
      handleClose(){
  
      }
    }
  }
  </script>
  <style scoped lang="less">
  /deep/ .el-dialog__header{
    background: rgba(8, 113, 232, 1);
  }
  /deep/ .el-dialog__title{
    color: #FFFFFF;
  }
  
  /deep/ .el-dialog__headerbtn .el-dialog__close{
    color: #FFFFFF;
  }
  
  /deep/ .el-dialog__footer {
    text-align: center;
  }
  </style>
  